<template>
    <template v-for="item in props.menuData" :key="item.index">
        <el-sub-menu
            v-if="item.children?.length"
            :index="item.index"
            :popper-class="pageSet().layout ? 'popperSubmenu' : ''"
            :key="item.path"
        >
            <template #title>
                <el-icon >
                    <component :is="item.icon || 'Menu'"></component>
                </el-icon>
                <span>{{ item.title }}</span>
            </template>
            <MenuChild :menuData="item.children"/>
        </el-sub-menu>
        <el-menu-item :index="item.index" @click="menuClick(item)" v-else>
            <el-icon >
                <!-- 动态组件渲染icon组件 -->
                <component :is="item.icon || 'Menu'"></component>
            </el-icon>
            <template #title><span>{{ item.title }}</span></template>
        </el-menu-item>
    </template>
</template>
<script setup>
import { defineProps } from "vue";
import MenuChild from "./MenuChild.vue";
import { breadcrumbList, menuInfo ,pageSet} from "@/store/pinia";
import { useRouter } from "vue-router";
const props = defineProps(["menuData"]);
const router = useRouter();
const menuClick = (data) => {
    menuInfo().updatePath(data.path);
    router.push(data.path);
    menuInfo().updateMenuName(data.index);
    props.menuData.forEach((item) => {
        if (item.index === data.index) {
            breadcrumbList().updateBreadcrumbList(
                { ...item, close: true },
                "add"
            );
        }
    });
};
</script>
